<template>
    <div>
      <el-dialog :title="$props.currentRiver.riverName" 
      :visible.sync="show" 
      :modal="false" 
      :close-on-click-modal="false">
        <div class="charts-select">
          <button :class="activeIndex == 0 ? 'active' : ''" @click="showJuPingCharts">逐年面雨量距平时序图</button>
          <button :class="activeIndex == 1 ? 'active' : ''" @click="showSurfaceRainfallCharts">逐年面雨量时序图</button>
        </div>
        <div id="river-info-echarts" ref="echarts"></div>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import * as echarts from 'echarts';
  //注册主题
  import essos from '@/assets/theme/essos.json'
  echarts.registerTheme("essos",essos);
  export default {
    props: ["dialogTableVisible","currentRiver"],
    data() {
      return {
        myCharts:null,
        activeIndex:0,
      };
    },
    computed:{
      show:{
        get(){
          return this.$props.dialogTableVisible;
        },
        set(val){
          this.$emit("closedRiverDialog")
        }
      },
      data(){
        return this.$props.currentRiver;
      }
    },
    mounted(){
      this.$nextTick(()=>{
        this.initCharts();
        this.updataCharts();
      })
    },
    methods:{
      //初始化图表
      initCharts(){
        //显示距平值
        const xAxisData = Object.keys(this.data.anomalys);
        this.myCharts = echarts.init(this.$refs.echarts,'essos');
        const initOption = {
        xAxis: {
          type: "category",
          data: xAxisData,
          //x坐标轴两边不留空格
          boundaryGap: false,
        },
        //网格
        grid: {
          left: "3%",
          top: "10%",
          right: "4%",
          bottom: "1%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
        },

        yAxis: {
          type: "value",
        },
        series: [
          {
            type:"line",
          }
        ],
      };
      this.myCharts.setOption(initOption);
      },
      //更新option的选项
      updataCharts(key="anomalys"){
        const yAxisData = this.data[key] == null ? [] : Object.values(this.data[key]);
        const option = {
        series: [
          {
            data:yAxisData,
          }
        ],
      };
        this.myCharts.setOption(option);
      },
      //显示面雨量距平图
      showJuPingCharts(){
        this.activeIndex = 0;
        this.updataCharts();
      },
      //显示面雨量
      showSurfaceRainfallCharts(){
        this.activeIndex = 1;
        this.updataCharts("precipitations");
      }
    }

  };
  </script>
  
  <style scoped lang="scss">
  #river-info-echarts{
    width: 100%;
    height: 400px;
  }
  .charts-select{
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    button{
      padding: 5px;
      // background-color: white;
      // color: white;
      border: none;
      outline: none;
      font-size: 16px;
      border-radius: 5px;
      cursor: pointer;
    }
  }
  .charts-select .active{
    background-color: #0A86D9;
  }
</style>
  